<template>
	<div class="course-detail">
		<div class="header">
			<img :src="frontImageFile" mode="aspectFill">
		</div>
		<div class="main">
			<div class="course-info">
				<h3>{{ courseDetail.courseName }}</h3>
				<p><span>{{ courseDetail.courseType === 1 ? '私教课' : '自由练' }}</span><span>{{
					setCourseMode(courseDetail.courseMode) }}</span><span>{{ courseDetail.courseTimes }}分钟/节</span>
				</p>
			</div>
			<h1>课程介绍</h1>
			<div class="course-desc">
				{{ courseDetail.introduce ? courseDetail.introduce : '' }}
			</div>
			<h1>课程图片</h1>
			<div class="course-img">
				<div class="img-item" >
					<img mode="aspectFill" :src="courseDetail.frontImageFileUrl">
				</div>
			</div>
			<h1>授课教练</h1>
			<ul class="list-coach">
				<li v-for="(item, index) in courseDetail.coachList" :key="index" @click="goDetailCoach(item)">
					<p><img mode="aspectFill"
							:src="item.portraitPictureFileUrl ? item.portraitPictureFileUrl : 'https://newmefit.cn/gym-center-2/1922227827956064256/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250513174951.png'">
					</p>
					<p>{{ item.userName }}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { courseGetById, getPublicUrl, listPublicUrl } from '@/api/manageApi'
import { getStore, setStore } from '@/util/service'
import { courseList, coachList } from './data'
export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			scrollHeight: 200,
			scrollLeft: 0,
			courseDetail: {},
			frontImageFile: '../../static/h3.jpg',
			courseImageFile: [],
			userCoachList: [],
			storeName: ''
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	onLoad(option) {
		// console.log(option.id)
		this.getCourseDetail(option.id)
	},
	methods: {
		goDetailCoach(item) {
			// console.log(item)
			var url = '/pagesA/home/coachDetail?id=' + item.userId + '&storeName=' + this.storeName
			this.goUrl(url)
		},
		setCourseMode(val) {
			if (val === 1) {
				return '1对1'
			} else if (val === 2) {
				return '1对2'
			} else {
				return ''
			}
		},
		getCourseDetail(id) {
			var params = {
				id: id,
				storeId: getStore('storeId')
			}
			for(let item of courseList){
				if(item.id == id){
					this.courseDetail = item
					this.userCoachList = item.userCoachList
				}
			}
			// courseGetById(params).then(res => {
			// 	console.log(res)
			// 	if (res.code == '200') {
			// 		var data = res.data
			// 		this.courseDetail = data
			// 		this.userCoachList = data.userCoachList
			// 		getPublicUrl({ fileId: data.frontImageFileId }).then(response => {
			// 			this.frontImageFile = response.data
			// 		})
			// 		listPublicUrl(data.imageFileIds).then(res => {
			// 			for (var key in res.data) {
			// 				this.courseImageFile.push(res.data[key])
			// 			}
			// 		})
			// 	}
			// })
		}
	}
}
</script>

<style lang="scss">
.course-detail {
	background: #fff;

	.header {
		width: 750rpx;
		height: 356rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.main {
		width: 100%;
		min-height: 160rpx;
		box-shadow: 0rpx -10rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
		// border-radius: 0rpx 60rpx 0rpx 0rpx;
		padding: 32rpx 36rpx;
		box-sizing: border-box;
		background: #fff;
		// margin-top: -60rpx;
		position: relative;
		z-index: 10;

		.course-info {
			height: 122rpx;
			border-bottom: 1px solid #eee;

			h3 {
				font-size: 30rpx;
				color: #1E1E1E;
				margin-bottom: 16rpx;
			}

			p {
				font-size: 22rpx;
				color: #838383;

				span {
					height: 40rpx;
					background: #F8F8F8;
					border-radius: 20rpx;
					display: inline-block;
					line-height: 40rpx;
					text-align: center;
					padding: 0 16rpx;
					margin-right: 10rpx;
				}
			}
		}

		h1 {
			margin-top: 36rpx;
			margin-bottom: 25rpx;
			font-size: 28rpx;
			color: #1E1E1E;
		}

		.course-desc {
			font-size: 26rpx;
			color: #575757;
			line-height: 38rpx;
		}

		.course-img {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.img-item {
				width: 326rpx;
				height: 250rpx;
				line-height: 250rpx;
				margin-bottom: 26rpx;

				img {
					max-width: 100%;
					max-height: 100%;
					vertical-align: middle;
				}
			}
		}

		.list-coach {
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;

			li {
				width: 180rpx;
				margin-bottom: 20rpx;
				margin-right: 60rpx;

				img {
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
				}

				p {
					font-size: 26rpx;
					color: #575757;
					margin-top: 16rpx;
					text-align: center;
				}
			}

			li:nth-child(3n) {
				margin-right: 0rpx;
			}
		}
	}
}
</style>
